<template>
  <div class="contentbox flex-col">
    <el-card class="card-margin flex-col">
      <el-descriptions
        title="日志文件记录"
        size="medium"
        :column="1"
        :colon="false"
      >
        <el-descriptions-item>
          <div class="taskview-top">
            <span>日志分类：</span>
            <el-select
              placeholder="请选择"
              v-model="logCategorySelect"
            >
              <el-option
                v-for="item in logCategroyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span>工厂：</span>
            <el-select placeholder="请选择" v-model="lineSelect" clearable>
              <el-option
                v-for="item in lineOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option
            ></el-select>
            <span>工序：</span>
            <el-select placeholder="请选择" v-model="processSelect" clearable>
              <el-option
                v-for="item in processOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span>设备：</span>
            <el-input
              style="width: 10vw"
              v-model="eqSearchName"
              placeholder="请输入"
              suffix-icon="el-icon-search"
            ></el-input>
            <span>任务名称：</span>
            <el-input
              style="width: 10vw"
              v-model="scriptSearchName"
              placeholder="请输入"
              suffix-icon="el-icon-search"
            ></el-input>
            <!-- <span>开始时间：</span>
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
            <span>结束时间：</span>
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker> -->

            <el-button type="primary" @click="searchTableData">搜索</el-button>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <div class="taskmain flex-col">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          height="100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="120"
            :index="table_index"
          >
          </el-table-column>
          <el-table-column prop="logCategory" label="日志分类">
          </el-table-column>
          <el-table-column prop="lineName" label="工厂"> </el-table-column>
          <el-table-column prop="processName" label="工序"> </el-table-column>
          <el-table-column prop="eqName" label="设备"> </el-table-column>
          <el-table-column prop="scriptName" label="任务名称"></el-table-column>
          <el-table-column prop="fileName" label="文件名称"> </el-table-column>
          <el-table-column prop="lastTime" label="最后一次写入时间">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="down(scope.row.path)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="->,total,sizes,prev, pager, next,jumper"
          :total="totalCount"
          :page-sizes="[20, 40, 60, 100]"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import $http from "../../utils/apiHelper";
export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: [],
      logCategroyOptions: [{
        label:"全选",
        value:-1
      },{
        label:"系统日志",
        value:0
      },{
        label:"MES日志",
        value:1
      },{
        label:"设备日志",
        value:2
      }],
      lineOptions: [],
      processOptions: [],
      logCategorySelect:-1,
      lineSelect: "",
      processSelect: "",
      eqSearchName: "",
      scriptSearchName: "",
      pageNum: 1,
      pageSize: 20,
      totalCount: 0,
      searchConditionLast: {
        logCategoryInt: 0,
        lineName: "",
        processName: "",
        eqName: "",
        scriptName: "",
        currentPage: 0,
        pageSize: 0,
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    table_index(index) {
      return (this.pageNum - 1) * this.pageSize + index + 1;
    },
    test() {
      console.log(this);
      console.log(window);
      console.log(window.parent);
    },
    loadFilter() {
      $http
        .get("/Log/GetOptionValue")
        .then((res) => {
          if (res && res.message == null) {
            let arr = [...res.Data];
            this.lineOptions = arr.filter(
              (e) => e.optionsName == "lineOptions"
            )[0].options;
            this.processOptions = arr.filter(
              (e) => e.optionsName == "procOptions"
            )[0].options;
            var a = arr.filter((e) => e.optionsName == "logCategoryOptions");
            // this.logCategroyOptions = arr[0].options; //.map(e => e.value); //.join(','));
            // this.lineOptions = arr[1].options; //.map(e => e.value); //.join(','));
            // this.processOptions = arr[2].options; //.map(e => e.value); //.join(','));
            console.log("a", a);
            // debugger;
          }
        })
        .catch((err) => {
          console.error("GetOptionValue", err);
        });
    },
    searchTableData() {
      let a = {
        logCategoryInt: this.logCategorySelect,
        lineName: this.lineSelect,
        processName: this.processSelect,
        eqName: this.eqSearchName,
        scriptName: this.scriptSearchName,
        currentPage: this.pageNum,
        pageSize: this.pageSize,
      };
      let isDifferent = false;
      for (let key in a) {
        if (
          key !== "currentPage" &&
          JSON.stringify(a[key]) !==
            JSON.stringify(this.searchConditionLast[key])
        ) {
          isDifferent = true;
          break;
        }

      }

      if (isDifferent) {
          this.pageNum = 1;
          a.currentPage = this.pageNum;
        }
      this.searchConditionLast = a;

      // debugger;
      $http
        .post("/Log/GetLogsTable", a)
        .then((res) => {
          if (res && res.Data) {
            this.totalCount = res.Data.totalCount; //记录总数
            this.tableData = res.Data.pageData;
          } else {
            this.tableData = [];
            this.totalCount = 0;
            this.$message(`${res.Message}`);
          }
        })
        .catch((err) => console.error("Search", err));
    },
    down(filePath) {
      //debugger;
      // window.location.href = 'http://10.33.32.189:8556/api/Log/GetFiles';
      const newWindow = window.open(
        `/webapi/Log/GetFiles?path=${filePath}`,
        "_self"
      );
    },
    // down() {
    // 会下载到内存里,全部下载之后调到新页面以及下载链接
    //   $http
    //     .get('/Log/GetFiles', {
    //       responseType: 'blob',
    //       timeout: -1,
    //     })
    //     .then((res) => {
    //       debugger;
    //       const blob = new Blob([res.data], {
    //         type: res.headers['content-type'],
    //       });

    //       const url = window.URL.createObjectURL(blob);
    //       const link = document.createElement('a');
    //       link.href = url;
    //       link.download = 'test.txt';
    //       // 打开新窗口进行下载
    //       const newWindow = window.open();
    //       newWindow.document.body.appendChild(link);
    //       link.click();
    //       console.log('GetBigFile-Res', res.status);
    //       window.URL.revokeObjectURL(url);
    //       // 关闭新窗口
    //       newWindow.close();
    //     })
    //     .catch((err) => console.log('GetBigFile-Error', err));
    // },
    // down() {
    //无反应
    //   const xhr = new XMLHttpRequest();
    //   xhr.open('GET', 'http://10.33.32.189:8556/api/Log/GetFiles', true);
    //   xhr.responseType = 'blob';
    //   xhr.onload = function () {
    //     if (xhr.status === 200) {
    //       const blob = xhr.response;
    //       // 在这里处理文件内容，例如保存到本地或进行其他操作
    //     } else {
    //       console.error('文件下载失败');
    //     }
    //     xhr.send();
    //   };
    // },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchTableData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchTableData();
      // debugger;
    },
  },
  created() {},
  mounted() {
    this.loadFilter();

    this.logCategorySelect = this.$route.query.logtype=='设备管理' ?2 : -1;
    this.lineSelect = this.$route.query.lineName || "";
    this.processSelect = this.$route.query.processName || "";
    this.eqSearchName = this.$route.query.eqName || "";
    this.scriptSearchName = this.$route.query.scriptName || "";

    this.searchTableData();
    // 处理通过菜单栏进入查询页面的情况
  },
};
</script>
